<script setup>
import { ref } from 'vue'
import { addParkRole, getParkRoleDetali, updateEditRole } from '@/api/billling'
const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  }
})
const form = ref({
  ruleNumber: '', //计费规则编号
  ruleName: '', //计费规则名称
  chargeType: 'duration', //收费类型
  freeDuration: null, //免费时长
  chargeCeiling: null, //收费上限
  durationTime: null, //时长计费单位时间
  durationType: '', //时长收费类型
  durationPrice: null, //时长计费单位价格
  turnPrice: null, //按次收费：每次价格
  partitionFrameTime: null, //分段收费 段内时间
  partitionFramePrice: null, //段内费用
  partitionIncreaseTime: null, //超出时间
  partitionIncreasePrice: null //超出时间费用
})
//定义emit
const emit = defineEmits([''])
//关闭弹框
const close = () => {
  form.value = {
    ruleNumber: '', //计费规则编号
    ruleName: '', //计费规则名称
    chargeType: 'duration', //收费类型
    freeDuration: null, //免费时长
    chargeCeiling: null, //收费上限
    durationTime: null, //时长计费单位时间
    durationType: '', //时长收费类型
    durationPrice: null, //时长计费单位价格
    turnPrice: null, //按次收费：每次价格
    partitionFrameTime: null, //分段收费 段内时间
    partitionFramePrice: null, //段内费用
    partitionIncreaseTime: null, //超出时间
    partitionIncreasePrice: null //超出时间费用
  }
  emit('update:showModal', false)
}
//确认
const onOk = async () => {
  if (form.value.id) {
    await updateEditRole(form.value)
  } else {
    await addParkRole(form.value)
  }
  emit('successAdd')
  close()
}
const getParkRoleDetaliApi = async (id) => {
  const { data } = await getParkRoleDetali(id)
  form.value = data
}
//向父组件暴露方法
defineExpose({
  getParkRoleDetaliApi
})
</script>
<template>
  <template>
    <a-modal
      title="添加计费规则"
      :visible="props.showModal"
      width="540px"
      @cancel="close"
      @ok="onOk"
    >
      <div class="modalBox">
        <a-form layout="vertical" :model="form">
          <a-form-item
            label="计费规则编号"
            name="ruleNumber"
            :rules="[{ required: true, message: '请输入计费规则编号！', trigger: 'blur' }]"
          >
            <a-input placeholder="请输入计费规则编号" v-model:value="form.ruleNumber"></a-input>
          </a-form-item>
          <a-form-item
            label="计费规则名称"
            name="ruleName"
            :rules="[{ required: true, message: '请输入计费规则名称', trigger: 'blur' }]"
          >
            <a-input placeholder="请输入计费规则名称" v-model:value="form.ruleName"></a-input>
          </a-form-item>
          <a-form-item label="计费方式(全天收费)">
            <a-radio-group v-model:value="form.chargeType" name="radioGroup">
              <a-radio value="duration">时长收费</a-radio>
              <a-radio value="turn">按次收费</a-radio>
              <a-radio value="partition">分段收费</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-row type="flex">
            <a-form-item label="免费时长">
              <a-input-number
                id="inputNumber"
                :min="1"
                placeholder="请输入免费时长"
                v-model:value="form.freeDuration"
                style="width: 138px"
              ></a-input-number
              >分钟
            </a-form-item>
            <a-form-item label="收费上限">
              <a-input
                placeholder="请输入收费上限"
                v-model:value="form.chargeCeiling"
                style="width: 130px"
              ></a-input
              >元
            </a-form-item>
          </a-row>
          <a-form-item label="计费规则">
            <!-- 时长收费 -->
            <template v-if="form.chargeType === 'duration'">
              <a-space>
                每
                <a-input-number
                  id="inputNumber"
                  :min="1"
                  v-model:value="form.durationTime"
                  style="width: 77px"
                  placeholder="请输入"
                />
                <a-select
                  placeholder="请选择"
                  v-model:value="form.durationType"
                  style="width: 120px"
                >
                  <a-select-option value="hour">小时</a-select-option>
                  <a-select-option value="minute">分钟</a-select-option>
                </a-select>
                <a-input
                  placeholder="请输入"
                  v-model:value="form.durationPrice"
                  style="width: 78px"
                ></a-input>
                元
              </a-space>
            </template>
            <!-- 按次收费 -->
            <template v-else-if="form.chargeType === 'turn'">
              <a-space>
                每次<a-input
                  v-model:value="form.turnPrice"
                  placeholder="请输入金额"
                  style="width: 182px"
                ></a-input
                >元
              </a-space>
            </template>
            <!-- 分段收费 -->
            <template v-else>
              <div>
                <a-space>
                  <a-input
                    v-model:value="form.partitionFrameTime"
                    placeholder="请输入"
                    style="width: 85px"
                  ></a-input
                  >小时内，每小时收费
                  <a-input
                    v-model:value="form.partitionFramePrice"
                    placeholder="请输入"
                    style="width: 76px"
                  ></a-input
                  >元
                </a-space>
              </div>
              <div style="margin-top: 20px">
                <a-space>
                  每增加<a-input
                    v-model:value="form.partitionIncreaseTime"
                    placeholder="请输入"
                    style="width: 80px"
                  ></a-input
                  >小时，增加
                  <a-input
                    v-model:value="form.partitionIncreasePrice"
                    placeholder="请输入"
                    style="width: 88px"
                  ></a-input
                  >元
                </a-space>
              </div>
            </template>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </template>
</template>
<style lang="less" scoped>
.modalBox {
  padding: 0 76px;
}
.ant-radio-wrapper {
  height: 36px;
  width: 98px;
  line-height: 36px;
  border: 1px solid #4770ff;
  border-radius: 4px;
  padding-left: 8px;
}
.ant-modal-footer {
  background-color: #f4f6f8;
}
</style>
